<template>
	<view class="callContainer">
		<view class="call-top">
			<image class="head" :src="avatarUrl"></image>
			<view>{{callName}}</view>
			<view>邀请你进行视频通话</view>
		</view>
		<view class="call-bottom">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="width: 145rpx;height: 145rpx;border-radius: 50%;background-color: #FFFFFF;margin-bottom: 10rpx;">
					<image class="bottom-icon" mode="widthFix" src="../../static/images/hangup.png" @click="hangup"></image>
				</view>
				<view style="color: #FFFFFF;">挂断</view>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="width: 145rpx;height: 145rpx;border-radius: 50%;background-color: #FFFFFF;margin-bottom: 10rpx;">
					<image class="bottom-icon" mode="widthFix" src="../../static/images/calls.png" @click="toCall"></image>
				</view>
				<view style="color: #FFFFFF;">接听</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl:'',
				callName: '',
				ext: null,
				from: null,
				to: null
			}
		},
		onLoad(option) {
			let ext = JSON.parse(option.ext)
			this.avatarUrl = ext.ext.avatar
			this.callName = ext.ext.name
			this.from = option.from
			this.to = option.toUserId
			this.ext = option.ext
			wx.vibrateShort({
				type:'heavy'
			})
		},
		methods:{
			hangup(){
				let id = this.$im.conn.getUniqueId();
				let msg = new this.$im.message('cmd', id);
				msg.set({
					to: this.from,
					from: this.to,
					action: 'rtcCall',
					ext: {
						action:'confirmCallee',
						callId: this.ext.callId,
						msgType: 'rtcCallWithAgora',
						result: 'refuse',
						ts: (new Date().getTime())
					},
					success(){
						console.log('挂断成功了')
					},
					fail(){
						console.log('挂断失败了')
					}
				});
				try{
					this.$im.conn.send(msg.body);
					uni.navigateBack({
						delta:1
					})
					// uni.reLaunch({
					// 	url: "/pages/index/index"
					// });
				}catch(e){
					console.log(e);
				}
			},
			toCall(){
				uni.getSystemInfo({
					success:(res) => {
						let id = this.$im.conn.getUniqueId();
						let msg = new this.$im.message('cmd', id);
						msg.set({
							to: this.from,
							action: 'rtcCall',
							ext: {
								action:'answerCall',
								callId: this.ext.callId,
								callerDevId: this.ext.callerDevId,
								calleeDevId: id,
								msgType: 'rtcCallWithAgora',
								result: 'accept',
								videoToVoice: '0',
								ts: (new Date().getTime())
							},
							success(){
								console.log('接听回调成功了')
							},
							fail(){
								console.log('接听回调失败了')
							}
						});
						try{
							this.$im.conn.send(msg.body);
							uni.redirectTo({
								url: "/pages5/videoChat/chat?ext="+this.ext+"&from="+this.from+"&toUserId="+this.to
							});
						}catch(e){
							console.log(e);
						}
					}
				});
				// uni.navigateTo({
				// 	url: "/pages5/videoChat/chat?ext="+this.ext+"&from="+this.from+"&toUserId="+this.to
				// });
			}
		}
	}
</script>

<style scoped>
	.callContainer{
		height: 100vh;
		background-color: #000000;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.call-top{
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
	}
	.head{
		width: 145rpx;
		height: 145rpx;
		border-radius: 50%;
		margin: 0 auto;
		display: block;
	}
	.call-bottom{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 30%;
	}
	.bottom-icon{
		width: 145rpx;
	}
</style>
